<template>
  <div class="login-tations">
    <div class="left" />
    <div class="rigth">
      <div class="box">
        <h4>登录</h4>
        <el-form ref="ruleFormsdfs" :model="ruleForm" :rules="rules" label-width="200px">
          <el-form-item label="请输入用户名" prop="mobile">
            <el-input v-model="ruleForm.mobile" />
          </el-form-item>
          <el-form-item label="请输入密码" prop="password">
            <el-input v-model="ruleForm.password" show-password />
          </el-form-item>
          <el-form-item prop="isArray">
            <el-checkbox v-model="ruleForm.isArray">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    var validateIsArray = (rule, value, callback) => {
      value ? callback() : callback(new Error('请勾选用户协议'))
    }
    return {
      ruleForm: {
        mobile: '13800000002',
        password: '123456',
        isArray: true
      },
      rules: {
        mobile: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^1[3|5|6|7|8|9]\d{9}$/, message: '手机号不合法', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
        ],
        isArray: [
          { 'validator': validateIsArray, 'trigger': 'change' }
        ]

      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleFormsdfs.validate(async valid => {
        if (valid) {
          // console.log('所有校验通过')
          // this.$store.dispatch('user/loginActions', this.ruleForm)
          try {
            this.$store.dispatch('user/loginActions', {
              mobile: this.ruleForm.mobile,
              password: this.ruleForm.password }
            )
            // 能不能再这里写登录成功以后的跳转--- 不能写
            // router.push('/')
          } catch (err) {
            //
          }
          // 后台就是在这个里面 发登录请求
        } else {
          console.log('有某一个校验失败')
          return false
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.login-tations{
  height: 100vh;
  width: 100%;
  display: flex;
  .left{
    flex: 3;
    background-image: url('~@/assets/common/login_back.png');
    background-size:cover ;
  }
  .rigth{
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    .box{
      // width: 100px;
      // height: 100px;
      // background-color: lightgrey;
      .el-input{
        width: 330px;
      }
      h4{
            margin-left: 100px;
            font-size: 22px;
      }
      .el-button{
         width: 330px;
      }
    }
  }
}

</style>
